<template>
  <div class='history-chart-item-container'>
    <div style='height: 100%;width: 100%;'>
      <a-row style='text-align: center'>
        <p class='chart-title'>{{ reportName || '' }}</p>
      </a-row>
      <a-row style='height: 40px;position: relative; z-index: 999' type='flex'>
        <a-col flex='auto'>
          <div style='display: flex'>
            <a-form style='margin-left: 10px;width: 100%;' :form='form' layout='inline' @submit='handleQueryData'>
              <a-row type='flex' style='width: 100%' justify='space-between'>
                <a-col>
                  <a-form-item label='监控点位'>
                    <a-select style='width: 140px;' placeholder='请选择点位' v-decorator="['itemId']"
                              :options='pointList'>
                    </a-select>
                  </a-form-item>
                  <a-form-item label='开始时间'>
                    <a-date-picker placeholder='请选择开始时间'
                                   :disabled-date='startDisabledDate'
                                   v-decorator="['startTime', {initialValue: moment(moment().subtract(1, 'days')).format('YYYY-MM-DD 00:00:00')}]"
                                   valueFormat='YYYY-MM-DD 00:00:00'
                                   format='YYYY-MM-DD 00:00:00' />
                  </a-form-item>
                  <a-form-item label='结束时间'>
                    <a-date-picker
                      placeholder='请选择结束时间'
                      :disabled-date='endDisabledDate'
                      v-decorator="['endTime', {initialValue: moment().format('YYYY-MM-DD 23:59:59')}]"
                      valueFormat='YYYY-MM-DD 23:59:59'
                      format='YYYY-MM-DD 23:59:59' />
                  </a-form-item>

                  <a-form-item>
                    <a-button type='primary' html-type='submit'>
                      <a-icon type='search' />
                      查询
                    </a-button>
                  </a-form-item>
                </a-col>
                <a-col>
                  <a-form-item>
                    <a-button type='primary' v-if='conputedEditPermission' @click='handleEdit'>
                      <a-icon type='edit' />
                      编辑
                    </a-button>

                    <a-button type='danger' v-if='conputedEditPermission' style='margin-left: 10px;'
                              @click='$emit("remove")'>
                      <a-icon type='delete' />
                      删除
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-col>
      </a-row>
      <a-row style='height: 300px;width: 100%;'>
        <a-col :span='24' style='height: 100%;width: 100%;'>
          <div v-if='!xData.length && !yData.length ' style='height: 100%'>
            <a-empty style='height: 100%' />
          </div>
          <div v-else style='height: 100%;width: 100%'>
            <line-chart
              v-if='+chartTypeCode === lineChartId'
              :loading='loading'
              height='100%'
              :color='resColor'
              legend-pos='bottom'
              :unit='unit'
              width='100%'
              :id='"line" + charKey'
              :x-data='xData'
              :y-data='yData'
            />
            <bar-chart
              v-if='+chartTypeCode === columnChartId'
              :loading='loading'
              height='100%'
              :color='resColor'
              legend-pos='bottom'
              :unit='unit'
              width='100%'
              :id='"bar" + charKey'
              :x-data='xData'
              :y-data='yData'
            />
            <pie-chart
              v-if='+chartTypeCode === pieChartId'
              :loading='loading'
              legend-pos='bottom'
              height='100%'
              :color='resColor'
              width='100%'
              :id='"bar" + charKey'
              :x-data='xData'
              :y-data='yData'
            />
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { findAllItemByReportId, findHistoryGraphData } from '@/api/historyTime'
import { LineChart, BarChart, PieChart } from '@/business-components/charts'
import { findDataDicInfoByType } from '@/api/dataDicInfo'
import moment from 'moment'

export default {
  components: { LineChart, BarChart, PieChart },
  props: {
    charKey: {
      type: [String, Number]
    },
    reportName: {
      type: String
    },
    chartTypeCode: {
      type: [String, Number]
    },
    moduleId: {
      type: String
    },
    mark: {
      type: [String, Number]
    },
    conputedEditPermission: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    mark () {
      this.getPointList()
    }
  },
  computed: {
    moment () {
      return moment
    },
    lineChartId () {
      if (this.reportTypeList && this.reportTypeList.length) {
        const lineObj = this.reportTypeList.find(item => item.code === 'line')
        return Number(lineObj.id)
      }
      return ''
    },
    columnChartId () {
      if (this.reportTypeList && this.reportTypeList.length) {
        const columnObj = this.reportTypeList.find(item => item.code === 'column')
        return columnObj.id
      }
      return ''
    },
    pieChartId () {
      if (this.reportTypeList && this.reportTypeList.length) {
        const pieObj = this.reportTypeList.find(item => item.code === 'pie')
        return pieObj.id
      }
      return ''
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      loading: true,
      pointList: [],
      xData: [],
      yData: [],
      reportTypeList: [],
      resColor: ''
    }
  },
  mounted () {
    this.getPointList()
    this.getReportTypeList()
  },
  methods: {
    startDisabledDate (startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate (endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    handleEdit () {
      this.$emit('edit', this.pointList)
    },
    async getReportTypeList () {
      const result = await findDataDicInfoByType(11)
      this.reportTypeList = result.map(item => {
        return {
          ...item,
          key: Number(item.id),
          label: item.name
        }
      })
    },
    getCurrentColor () {
      const { form } = this
      const { itemId } = form.getFieldsValue(['itemId'])
      if (this.pointList.find(item => item.id === itemId)) {
        return this.pointList.find(item => item.id === itemId)['color'] || '#4A90E2'
      }
      return '#4A90E2'
    },
    handleQueryData (e) {
      e && e.preventDefault()
      const form = this.form
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['itemId', 'startTime', 'endTime'])
      this.resColor = this.getCurrentColor()
      findHistoryGraphData({
        moduleId: this.moduleId,
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit = unit
        if (dataItems) {
          that.yData = dataItems.map(item => item.loadValue)
          that.xData = dataItems.map(item => item.time)
        } else {
          that.yData = []
          that.xData = []
        }
        setTimeout(() => {
          this.loading = false
        }, 800)
      })
    },
    async getPointList () {
      if (!this.charKey) {
        return
      }
      const result = await findAllItemByReportId({
        reportId: this.charKey
      })
      this.pointList = result.map(item => {
        return {
          ...item,
          key: item.id,
          label: item.displayName
        }
      })
      this.form.setFieldsValue({
        itemId: this.pointList[0].key
      })
      this.handleQueryData()
    }
  }
}
</script>

<style lang='less' scoped>
.history-chart-item-container {
  height: 400px;
  box-sizing: border-box;
  padding: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  margin-bottom: 20px;
  border-radius: 10px;

  .chart-title {
    font-size: 24px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    color: #4470D8;
    line-height: 32px;
  }
}
</style>
